<template>
  <div style="margin-left: 15%">
    <div style="border: solid 1px rgba(49,63,77,0.43); width: 1000px;" class="demo-image__preview">
      <el-row>
        <el-col span="6" offset="1" style="margin-top: 25px">

          <el-carousel :interval="5000" arrow="always" style="width:300px;height: auto ">
            <el-carousel-item v-for="item in imgList" :key="item.idView">

              <el-image
                :src="item.idView"
                class="image"
                style="width: 300px;height: auto"
                :preview-src-list="[item.idView]"
              >
              </el-image>

            </el-carousel-item>
          </el-carousel>
          <label style="font-family: 华文仿宋;line-height: 6;margin-left: 20px"> <i class="el-icon-star-on" style="margin-left: 20px">收藏宝贝(店铺销量第一)</i></label>
        </el-col>

        <el-col span="6" offset="1" style="width: 500px; height: 400px;margin-left: 170px;margin-top: 25px">
          <el-row>
            <el-col style="background-color: antiquewhite"><label style="line-height: 3;font-family: 华文仿宋"
                                                                  v-model="price">
              商品价格&nbsp; &nbsp; &nbsp; &nbsp;</label><span
              style="font-family: 'Droid Sans Mono Slashed';font-size: 25px; color: #ff3213;font-style: initial">￥{{price}}</span>
            </el-col>
            <el-col><label style="line-height: 3;font-family: 华文仿宋" v-model="goods"> 商品名称&nbsp; &nbsp; &nbsp; &nbsp;
              {{goods}}</label></el-col>
            <el-col><label style="line-height: 3;font-family: 华文仿宋" v-model="brand"> 品牌 {{brand}}</label></el-col>
<!--            <el-col>-->
<!--              <label style="line-height: 3" class="font">尺码 </label>-->
<!--              <el-radio v-model="radio1" label="35"></el-radio>-->
<!--              <el-radio v-model="radio1" label="36"></el-radio>-->
<!--              <el-radio v-model="radio1" label="37"></el-radio>-->
<!--              <el-radio v-model="radio1" label="38"></el-radio>-->
<!--              <el-radio v-model="radio1" label="39"></el-radio>-->
<!--            </el-col>-->
            <el-col>
              <label style="line-height: 3;font-family: 华文仿宋" v-model="num">商品数量 </label>
              <el-input-number v-model="num" value="1" :min="0"
                               label="描述文字"></el-input-number>
            </el-col>
            <el-col>
              <el-button style="background-color: navajowhite;margin-left: 75px; margin-top: 15px" v-on:click="pay">
                直接购买
              </el-button>
              <el-button :plain="true" @click="insert" style="background-color: darkorange">加入购物车</el-button>
            </el-col>
            <el-col>
              <el-col span="4"><span style="line-height: 3;font-family: 华文宋体; ">承诺： </span></el-col>
              <el-col span="2"><img width="17px" height="17px" src="../../../assets/reason.jpg"
                                    style="margin-top: 15px"></el-col>
              <el-col span="4">
                <el-checkbox v-model="checked" style="margin-top: 3px" class="font">七天无理由</el-checkbox>
              </el-col>
            </el-col>
            <el-col>
              <el-col span="4"><span class="font">支付方式：</span></el-col>
              <el-col span="4"><img width="17px" height="17px" src="../../../assets/pay1.png"
                                    style="margin-top: 15px"><span class="font">&nbsp;&nbsp;花呗</span></el-col>
              <el-col span="4"><img width="17px" height="17px" src="../../../assets/pay2.png"
                                    style="margin-top: 15px"><span class="font" @click="pay">&nbsp;&nbsp;支付宝</span>
              </el-col>
              <el-col span="4"><img width="17px" height="17px" src="../../../assets/pay3.png"
                                    style="margin-top: 15px"><span class="font">&nbsp;&nbsp;微信</span></el-col>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <div align="center" style="width: 1000px;">
      <el-tabs type="border-card">
        <el-tab-pane label="详情">
          <div>
            <el-row>
              <el-col align="left" span="6">
                <p class="font1">
                  品牌：芬必得
                </p>
                <p class="font1">
                  套餐类型: 套餐三 套餐五 套餐一 套餐二
                </p>
                <p class="font1">
                  批准文号: 国药准字H10900089
                </p>
                <p class="font1">
                  生产企业: 中美天津史克制药有限公司
                </p>
              </el-col>

              <el-col offset="2" align="left" span="6">
                <p class="font1">
                  规格: 0.3g*24粒/盒
                </p>
                <p class="font1">
                  类别: 化学药
                </p>
                <p class="font1">
                  产品剂型: 胶囊
                </p>
                <p class="font1">
                  用法: 口服
                </p>
              </el-col>

              <el-col offset="2" align="left" span="6">
                <p class="font1">
                  使用剂量: 成人，一次1粒，一日2次

                </p>
                <p class="font1">
                  有效期: 36个月
                </p>
                <p class="font1">
                  非处方药类型: 甲类非处方药
                </p>
                <p class="font1">
                  不良反应：无
                </p>
              </el-col>

            </el-row>
            <el-divider style="background: #ff8c00"><span style="color: #ff8c00">消费提醒： 使用前请认真阅读并理解药品注意事项，禁忌等内容，并在医师的指导下使用，将药品置于儿童无法触及位置。</span></el-divider>
          </div>
          <el-row>
            <div style="width:auto;height: auto;margin-left: 100px ">
              <el-col span="5" style=" width: auto;height: auto">
                <img :src="this.$route.query.detail1">
              </el-col>
              <el-col span="5" style=" width: auto;height: auto">
                <img :src="this.$route.query.detail2">
              </el-col>
              <el-col span="5" style="width: auto;height: auto ">
                <img :src="this.$route.query.detail3">
              </el-col>
            </div>
          </el-row>


        </el-tab-pane>
        <el-tab-pane label="宝贝评价">
          <el-tabs type="card">
            <el-tab-pane label="好评">好评
              <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                  prop="date"
                  label="日期"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="用户名"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="content"
                  label="评价">
                </el-table-column>
              </el-table>

            </el-tab-pane>
            <el-tab-pane label="追评">追评</el-tab-pane>
            <el-tab-pane label="中评">中评
              <el-table
                :data="tableMiddle"
                style="width: 100%">
                <el-table-column
                  prop="date1"
                  label="日期"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="name1"
                  label="用户名"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="content1"
                  label="评价">
                </el-table-column>
              </el-table>
            </el-tab-pane>

            <el-tab-pane label="差评">差评</el-tab-pane>
          </el-tabs>

        </el-tab-pane>
        <el-tab-pane label="售后服务">
        </el-tab-pane>
      </el-tabs>

    </div>

    <div id="divform"></div>
  </div>
</template>

<script>

  export default {
    radio: 0,
    name: "Details",
    data() {
      return {

        imgList: [
          {id: 0, idView: this.$route.query.img},
          {id: 1, idView: this.$route.query.img1},
          {id: 2, idView: this.$route.query.img2},
          {id: 3, idView: this.$route.query.img3},
        ],

        srcList: [
          {id: 0, idView: this.$route.query.img},
          {id: 1, idView: this.$route.query.img1},
          {id: 2, idView: this.$route.query.img2},
          {id: 3, idView: this.$route.query.img3},
        ],

        loginState: false,
        checked: true,
        radio: '1',
        radio1: '2',
        num: '1',
        /*num1: '10',*/
        orderId: '',

        id: this.$route.query.id,
        type: this.$route.query.type,
        price: this.$route.query.price,
        brand: this.$route.query.brand,
        goods: this.$route.query.goods,
        img:this.$route.query.img,
        tableData: [{
          date: '2022-3-26',
          name: '王*心',
          content: '值得购买'
        }, {
          date: '2022-3-01',
          name: 'x**',
          address: '很舒服'
        }, {
          date: '2020-11-03',
          name: 'mmy**',
          content: '商品真的很好，值得购买'
        }],

        tableMiddle:
          [{
            date1: '2022-3-26',
            name1: '王**',
            content1: '商品质量还可，性价比有点高'
          }, {
            date1: '2020-11-04',
            name1: '小甜心**',
            content1: '一开始有点问题，客服很耐心的解决了，建议买大一码'
          }]


      };


    },
    // mounted() {
    //   this.orderId = this.getTime();
    // }
    // ,
    methods:
      {
        getTime() {
          var time = new Date();
          var y = time.getFullYear();
          var m = time.getMonth() + 1;
          var d = time.getDate();
          var h = time.getHours();
          var min = time.getMinutes();
          m = m < 10 ? (m = "0" + m) : m;
          d = d < 10 ? (d = "0" + d) : d;
          h = h < 10 ? (h = "0" + h) : h;
          min = min < 10 ? (min = "0" + min) : min;
          return y + m + d + h + min;
        },
        createCode() {
          var code = 0;
          var num = 1;
          var codeLength = 4;//验证码的长度
          var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);//随机数
          for (var i = 0; i < codeLength; i++) {//循环操作
            var index = Math.floor(Math.random() * 10);//取得随机数的索引（0~35）
            code += random[index] * num;//根据索引取得随机数加到code上
            num = num * 10;
          }
          return code;
        },
        pay() {
          var orderId = this.getTime();
          var buyTime = orderId;
          orderId += this.createCode();
          var totalPrice = 0.0;
          totalPrice = this.num * this.price;
          let id = window.sessionStorage.getItem("id");
          if (id == null) {
            //未登录
            /*      window.sessionStorage.setItem("id", " ");*/
            this.$router.push({path: "/UserLogin"})
          } else {
            this.$http.post('http://localhost:8888/order/insert', {
              id:id,
              orderId: orderId,
              goods: this.goods,
              state: "未支付",
              amount: this.num,
              price: totalPrice,
              address: window.sessionStorage.getItem("address"),
              buyTime: buyTime,
              img: this.imgList[0].idView,
              size: this.radio1
            }, {emulateJSON: true});
            this.$http.post('http://localhost:8888/AliPay', {
              goods: this.goods,
              done_money: totalPrice,
              done_id: orderId
            }, {emulateJSON: true}).then(res => {
              if (res) {
                console.log(res.data.data);
                document.write(res.data.data);
              } else {
                this.$alert("错误：" + res, "提示", {
                  confirmButtonText: '确定'
                });
              }
            })
          }
        },
        /*点击加入购物车，给后台数据库购物车表发加入购物车的鞋数据*/
     /*   insert(){
          this.$router.push({path: "/Cart"})}*/

        async insert() {
          let id = window.sessionStorage.getItem("id");
          const {data: res} = await this.$http.post(
            "http://localhost:8888/cart/insert",
            {id: id, name: this.goods, price: this.price, count: this.num,img:this.img},
            {emulateJSON: true})
          if (res.code === 200) {
            this.$message({
              message: "加入成功",
              type: 'success',
            });
            this.$router.push({path:"/Cart",query:{
                img1:this.$route.query.img1,
                img2:this.$route.query.img2,
                img3:this.$route.query.img3,
                detail1:this.$route.query.detail1,
                detail2:this.$route.query.detail2,
                detail3:this.$route.query.detail3}})

          } else {
            this.$message({
              message: res.msg,
              type: 'error'
            })
          }}

      }

  }
</script>

<style scoped>
  .font {
    line-height: 3;
    font-family: 华文仿宋
  }

  .font1 {
    line-height: 1;
    font-family: 华文仿宋;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
